<style lang="less">

</style>
<template>
    <Modal
        v-model="drawer.show" transfer
        :title="lang.edit"
        :width="width"
        :draggable="true"
        :closable="true"
        :mask-closable="false"
        :z-index="zIndex"
        @on-ok="ok">
        <span slot="header" :style="titleStyle">{{lang.edit}}</span>
        <div v-if="drawer.show" style="min-height: 820px; height:820px;overflow-y: auto;overflow-x:hidden;margin: 10px;">
            <Form ref="_frm" :model="data" :rules="ruleValidate"
                  :label-width="labelWidth" :label-position="labelPosition">
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem prop="type" :label="lang.type">
                          <fieldCell v-model="data.type" :config="{type:'display',disabled:true}"></fieldCell>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem prop="className" :label="lang.className">
                          <fieldCell v-model="data.className" :config="{type:'display',disabled:true}"></fieldCell>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem prop="name" :label="lang.instanceName">
                          <fieldCell v-model="data.name" :config="{type:'text'}"></fieldCell>
                        </FormItem>
                    </Col>
                    <Col span="12">

                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="24">
                      <FormItem prop="comments" :label="lang.comments">
                        <Input v-model="data.comments" clearable :placeholder="lang.commentsPlaceholder"
                               type="textarea"/>
                      </FormItem>
                    </Col>
                </Row>
            </Form>
            <Alert>{{ lang.modelProperties }}</Alert>
            <div style="display: flex; flex-direction: row; justify-content: flex-start;margin-left: -80px">
                <instanceFrom v-if="freshForm"
                              ref="_editFrm"
                              style="flex: 1 1 auto"
                              :fields="fields"
                              :localOptions="localOptions"
                              :data="formData"
                              :formStyle="formStyle"
                              :form="form"
                              :style="{ height: formHeight }">
                </instanceFrom>
            </div>
        </div>
    </Modal>
</template>

<script>
    import instanceFrom from '../../../parts/cfg-instance-form';

    export default {
        name: 'cfgStatisticsInstanceEditModal',
        components: { instanceFrom },
        data () {
            return {
              collectionObject:null,
              modelType:"statistics",
              features: [],
              general: {
                  status: { type: 'Boolean', defaultValue: false },
                  name: { type: 'string', defaultValue: '' },
              },
              propInfo: {},
              values: {},
              modelClassList: [],
              freshForm: false,
              form: {
                  title: 'test',
                  labelWidth: 160,
                  interval: 24,
                  itemWidth: null,
                  itemAlign: true,
                  col: 2,
                  disabled: false,
                  submit: 'submit',
                  confirmPrompt: 'confirmPrompt',
                  cancel: 'cancel'
              },
              fields: [],
              localOptions: [],
              formData: {},
              formStyle: {},
              formHeight: 200,

            }
        },
        props: {
          width: {
            default: () => {
              return 1024;
            }
          },
          zIndex: {
            default: () => {
              return 100;
            }
          },
          titleStyle: {
            default: () => {
              return {}
            }
          },
            data: {
                default: () => {
                    return {}
                }
            },
            loading: {
                default: () => {
                    return false;
                }
            },
            show: {
                default: () => {
                    return false;
                }
            },
            drawer: {
                default: () => {
                    return {
                        show: false,
                    };
                }
            },
        },
        computed: {
          labelWidth () {
              return 100;
          },
          labelPosition () {
              return 'right';
          },
          lang () {
              return {
                  'en-US': {
                      edit: 'edit',
                      new: 'new',
                      detail: 'detail',
                      action: 'action',
                      submit: 'submit',
                      type: 'type',
                      typePlaceholder: 'Please select type',
                      className: 'className',
                      classNamePlaceholder: 'Please enter class name',
                      version: 'version',
                      versionPlaceholder: 'Please enter version',
                      published: 'published',
                      instanceName: 'instance name',
                      instanceNamePlaceholder: 'Please instance name',
                      comments: 'comments',
                      commentsPlaceholder: 'Please enter comments',
                      modelProperties: 'Model Attribute Configuration',
                      typeRuleMsg: 'Please select property type',
                      classNameRuleMsg: 'Please enter class name',
                      instanceNameRuleMsg: 'Please instance name'
                  },
                  'zh-CN': {
                      edit: '编辑',
                      new: '添加',
                      detail: '查看',
                      action: '操作',
                      submit: '提交',
                      type: '所属类型',
                      typePlaceholder: '请选择所属类型',
                      className: '模型类名',
                      classNamePlaceholder: '请输入模型类名',
                      version: '版本号',
                      versionPlaceholder: '请输入版本号',
                      published: '是否发布',
                      instanceName: '实例名',
                      instanceNamePlaceholder: '请输入实例名',
                      comments: '说明',
                      commentsPlaceholder: '请输入描述信息',
                      modelProperties: '模型属性配置',
                      typeRuleMsg: '请选择所属类型',
                      classNameRuleMsg: '请输入模型类名',
                      instanceNameRuleMsg: '请输入实例名'
                  },
              }[this.G_Locale]
          },
          typeList() {
            return this.$modelObject.getModelType(this.modelType);
          },
          ruleValidate () {
              return {
                  type: [
                      { required: true, message: this.lang.typeRuleMsg, trigger: 'blur' }
                  ],
                  className: [
                      { required: true, message: this.lang.classNameRuleMsg, trigger: 'blur' }
                  ],
                  name: [
                      { required: true, message: this.lang.instanceNameRuleMsg, trigger: 'blur' }
                  ],
              }
          }
        },
      watch:{
        'drawer.show':function(){
          if(this.drawer.show){
            let filter=this.collectionObject.util.getFilter({
              type:this.data.type,
              className:this.data.className,
              published:true
            });
            let _this=this;
            this.collectionObject.query(filter).then(flag=>{
              if(flag){
                _this.modelList=_this.collectionObject.records;
                _this.initEditFormData();
              }
            });
          }
        }
      },
        mounted () {
          this.collectionObject=this.$modelObject.create(this.modelType+'ModelCollection');

        },
        methods: {
            initEditFormData () {
              this.fields = [];
              this.formData = {};
              this.initInsForm(this.data.className);
              let values = this.data.values;
              let formKeys = Object.keys(this.formData);
              formKeys.map(k => {
                this.formData[k] = values[k];
              })
              this.freshForm = false;
              this.$nextTick(() => {
                this.freshForm = true;
              })
            },

            /**
             *构建字段及其值
             */
            initInsForm (className) {
                let currentModel = this.modelList.find(m => m.className === className);
                let features = currentModel.features;
                features.map(m => {
                    let field = this.buildFormField(m.fieldType, m.fieldName, m.defaultValue, m.comments);
                    this.fields.push(field)
                    this.formData[m.fieldName] = m.defaultValue;
                })
                let values = currentModel.values;
                let keys = Object.keys(values);
                keys.map(k => {
                    let group = values[k];
                    group.map(g => {
                        let formKey = Object.keys(this.formData);
                        if (!formKey.includes(g.propertyName)) {
                            let field = this.buildFormField(g.propertyType, g.propertyName, g.defaultValue, g.comments);
                            this.fields.push(field)
                            this.formData[g.propertyName] = g.defaultValue;
                        }
                    })
                })
            },

            /**
             * 构建表单字段信息
             * @param fieldType 字段类型
             * @param fieldName 字段名称
             * @param defaultValue 字段默认值
             * @param comments 说明
             */
            buildFormField (fieldType, fieldName, defaultValue, comments) {
                let field = {
                    clearable: false,
                    dataIndex: fieldName,
                    disabled: false,
                    filterByLabel: false,
                    filterable: false,
                    label: fieldName,
                    labelInValue: false,
                    placeholder: '',
                    readonly: false,
                    required: false,
                    show: true,
                    validate: 'any'
                }
                switch (fieldType) {
                    case 'Double':
                        field = {
                            ...field,
                            type: 'number',
                            min: 0,
                            max: 99999999,
                            precision: 2
                        }
                        break;
                    case 'Integer':
                        field = {
                            ...field,
                            type: 'number',
                            min: 0,
                            max: 99999999,
                            precision: 0
                        }
                        break;
                    case 'Boolean':
                        field = {
                            ...field,
                            type: 'check',
                        }
                        break;
                    case 'DateTime':
                        field = {
                            ...field,
                            type: 'datetime',
                        }
                        break;
                    default:
                        field = {
                            ...field,
                            type: 'text'
                        }
                        break;
                }
                return field;
            },
            /**
             * 提交添加或修改数据
             */
            ok () {
                this.$refs._frm.validate(valid => {
                    if (valid) {
                        let values = this.$refs._editFrm.getData();
                        this.$set(this.data, 'values', values);
                        this.$emit('submit', this.data,);
                    }
                });
            },
        }
    }
</script>
